<template>
    <div>
        <div style="display: flex;align-items: center;justify-content: center; box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px;border-radius: 5px; margin-bottom: 10px">
            {{enroll.username}}-{{enroll.title}}   竞赛报名详情
        </div>
        <div style="display: flex; margin: 10px 0">
            <el-card style="width: 30%">
                <el-card style="
                display: flex;align-items: center;justify-content: center;
                width: 100%;
                box-shadow: 0 0 10px rgba(0,0,0,.1); border-radius: 10px; font-size: 16px;
                margin-bottom: 20px">
                    当前流程
                </el-card>
                <div style="height: 300px;">
                    <el-steps direction="vertical" :active = active
                              finish-status="success"
                              process-status="finish"
                    >
                        <el-step title="报名" description="报名信息成功提交"></el-step>
                        <el-step title="审核"></el-step>
                        <el-step title="支付" description="如果付费模式是免费也显示成功"></el-step>
                        <el-step title="评分"></el-step>
                    </el-steps>
                </div>
            </el-card>
            <el-card style="width: 70%; margin-left: 10px">
                <el-form label-width="80px" style="display: flex;">
                    <div style="width: 50%; margin-top: 50px">
                        <el-form-item label="竞赛名称">
                            <el-input style="" readonly v-model="enroll.title"></el-input>
                        </el-form-item>
                        <el-form-item label="竞赛类型">
                            <el-input readonly v-model="enroll.sign"></el-input>
                        </el-form-item>
                        <el-form-item label="参赛者">
                            <el-input readonly v-model="enroll.username"></el-input>
                        </el-form-item>
                        <el-form-item label="所属学部">
                            <el-input readonly v-model="enroll.major"></el-input>
                        </el-form-item>
                        <el-form-item label="申请时间">
                            <el-input type="text" readonly v-model="enroll.createdtime"></el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 50%; margin-top: 50px">
                        <el-form-item label="指导教师">
                            <el-input readonly v-model="enroll.teacher"></el-input>
                        </el-form-item>
                        <el-form-item label="参赛作品">
                            <el-button type="primary" plain @click="downloadFile(enroll.opus)"
                            >下载
                            </el-button>
                        </el-form-item>
                        <el-form-item label="审核文件">
                            <el-button type="primary" plain @click="downloadFile(enroll.opus)"
                            >查看
                            </el-button>
                        </el-form-item>
                        <el-form-item label="审核回复">
                            <el-input readonly type="textarea" v-model="enroll.content"></el-input>
                        </el-form-item>
                        <el-button style="margin-left: 370px; margin-top: 40px" v-if="user.role === '管理员' || user.role === '教师'" @click="$router.push('/enrollManage')">返回</el-button>
                        <el-button style="margin-left: 370px; margin-top: 40px" v-if="user.role === '学生'" @click="$router.push('/enroll')">返回</el-button>
                    </div>

                </el-form>

            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "EnrollDetail",
        data() {
            return {
                enroll: {},
                active: 1,
                user: JSON.parse(localStorage.getItem("honey-user") || '{}'),//拿取个人用户信息
            }
        },
        created() {
            let id = this.$route.query.id
            if (!id) {
                return
            }
            this.$request.get('/enroll/selectById/' + id).then(res => {
                this.enroll = res.data
            })
            setTimeout(() => {
                this.load()
                console.log(this.enroll)
            }, 100);
        },
        methods: {
            downloadFile(url) {
                window.open(url)
            },
            load(){
                if (this.enroll.audit === '已通过'){
                    this.active = 2
                    if (this.enroll.payfor === '已支付' || this.enroll.pay === '免费'){
                        this.active = 3
                        if (this.enroll.grade === '已评分'){
                            this.active = 4
                        }
                    }
                }
            }
        }
    }

</script>

<style scoped>
.el-input__inner{
    width: 200px;
    font-size: 14px
}
</style>